<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>备件管理系统 - 库存调整记录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        .el-table__header th {
            background-color: #e1dddd !important; /* 表头底色改为灰色 */
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题与退出按钮 -->
    <header class="header">
        <h2 style="margin: 0;">库存调整记录</h2>
        <el-button type="info" size="medium" @click="logout">退出</el-button>
    </header>

    <!-- 搜索框 -->
    <main style="padding: 20px;">
        <div style="margin-bottom: 10px;">
            <el-input v-model="searchQuery" placeholder="请输入备件ID或差异量" style="width: 200px;"></el-input>
        </div>

        <!-- 数据表格 -->
        <el-table :data="paginatedInventoryAdjustmentsList" border style="width: 100%">
            <el-table-column prop="adjustmentid" label="ID"></el-table-column>
            <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
            <el-table-column prop="difference" label="差异量"></el-table-column>
            <el-table-column prop="adjustmentDate" label="调整日期"></el-table-column>
            <el-table-column prop="userid" label="用户ID"></el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
                layout="prev, pager, next"
                :total="filteredInventoryAdjustmentsList.length"
                v-model:current-page="currentPage"
                :page-size="pageSize"
                style="margin-top: 20px; justify-content: center;">
        </el-pagination>
    </main>

    <!-- 底部版权信息 -->
    <footer class="footer" style="text-align: center; padding: 10px;">
        &copy; 2025 备件管理系统 - 版权所有
    </footer>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>

<script>
    const { createApp } = Vue;
    const apiClient = axios.create({
        //本机地址
        //baseURL: 'http://localhost:8086',
        //服务器 地址
        baseURL: 'http://8.137.85.243:8086',
        timeout: 5000
    });

    const app = createApp({
        data() {
            return {
                inventoryAdjustmentsList: [],
                searchQuery: '',
                currentPage: 1,
                pageSize: 10
            };
        },
        computed: {
            filteredInventoryAdjustmentsList() {
                return this.inventoryAdjustmentsList.filter(item => {
                    return String(item.sparepartid).includes(this.searchQuery) ||
                        String(item.difference).includes(this.searchQuery);
                });
            },
            paginatedInventoryAdjustmentsList() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.filteredInventoryAdjustmentsList.slice(start, end);
            }
        },
        mounted() {
            this.loadInventoryAdjustments();
        },
        methods: {
            async loadInventoryAdjustments() {
                const res = await apiClient.get('/api/inventoryadjustments/listall');
                this.inventoryAdjustmentsList = res.data;
            },
            logout() {
                window.location.href = '/operator.html';
            }
        }
    });

    app.use(ElementPlus);
    app.mount('#app');
</script>
</body>
</html>
